<template>
  <div class="goodsList" :class="{isTitle:listTitleIsShow}">
    <div class="deRecomTitle" v-if="listTitleIsShow">热门推荐</div>
    <goods-item v-for="(item,index) in goodsList" :key="index" :goodsItem="item" class="goodsItem"></goods-item>
  </div>
</template>

<script>
import GoodsItem from "./GoodsItem";
export default {
  name: "GoodsList",
  props: {
    goodsList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      listTitleIsShow: this.$route.name === "details"
    };
  },
  components: {
    GoodsItem
  },
  mounted() {}
};
</script>

<style>
.goodsList {
  position: relative;
  display: flex;
	flex-wrap: wrap;
  justify-content: space-around;
}
.goodsList.isTitle{
	padding-top: 44px;
}
.goodsItem {
  width: 48%;
  text-align: center;
  font-size: 15px;
  margin-bottom: 6px;
}
.deRecomTitle {
  position: absolute;
  width: 100%;
  top: 0px;
  left: 0px;
  padding: 10px 6px;
  font-size: 14px;
  box-shadow: 0 2px 3px #ccc;
}
</style>
